import React from 'react';
import {
    View,
    StyleSheet,
    ScrollView,
    Alert,
    TouchableOpacity,
} from 'react-native';
import {
    useThemeColors,
    Navigation,
    UI,
    Layout,
} from '@gaozh1024/rn-toolkit';
import { SCREEN_NAMES } from '../../config';

const ProfileTabScreen: React.FC = () => {
    const colors = useThemeColors();

    const menuItems = [
        { id: 1, title: '账户设置', icon: 'settings-outline', action: () => Alert.alert('账户设置') },
        { id: 2, title: '隐私设置', icon: 'lock-closed-outline', action: () => Alert.alert('隐私设置') },
        { id: 3, title: '通知设置', icon: 'notifications-outline', action: () => Alert.alert('通知设置') },
        { id: 4, title: '帮助中心', icon: 'help-circle-outline', action: () => Alert.alert('帮助中心') },
        { id: 5, title: '关于我们', icon: 'information-circle-outline', action: () => Alert.alert('关于我们') },
    ];

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: colors.background,
        },
        profileCard: {
            padding: 30,
            alignItems: 'center',
            marginBottom: 10,
        },
        avatarContainer: {
            marginBottom: 15,
        },
        avatar: {
            width: 80,
            height: 80,
            borderRadius: 40,
            backgroundColor: colors.primary,
            alignItems: 'center',
            justifyContent: 'center',
        },
        statsCard: {
            flexDirection: 'row',
            paddingVertical: 20,
            marginHorizontal: 10,
            marginBottom: 10,
        },
        statItem: {
            flex: 1,
            alignItems: 'center',
        },
        statDivider: {
            width: 1,
            backgroundColor: colors.border,
            marginVertical: 10,
        },
        menuContainer: {
            marginHorizontal: 10,
            marginBottom: 10,
        },
        menuItem: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 15,
            borderBottomWidth: 1,
            borderBottomColor: colors.border,
        },
        menuItemLeft: {
            flexDirection: 'row',
            alignItems: 'center',
        },
        menuIcon: {
            marginRight: 15,
        },
        actionsContainer: {
            padding: 20,
        },
        actionButton: {
            marginBottom: 10,
        },
    });

    return (
        <Layout.Container>
            <ScrollView style={styles.container}>
                {/* 用户信息卡片 */}
                <Layout.Card style={styles.profileCard} backgroundColor={colors.surface}>
                    <View style={styles.avatarContainer}>
                        <View style={styles.avatar}>
                            <UI.Icon
                                name="person"
                                size={40}
                                color={colors.onPrimary}
                            />
                        </View>
                    </View>

                    <UI.Text variant="h3" weight="bold" color="onSurface" style={{ marginBottom: 5 }}>
                        用户名称
                    </UI.Text>
                    <UI.Text variant="body2" color="onSurface" style={{ marginBottom: 20 }}>
                        user@example.com
                    </UI.Text>

                    <UI.Button
                        title="编辑资料"
                        variant="outline"
                        onPress={() => Alert.alert('编辑资料')}
                    />
                </Layout.Card>

                {/* 统计信息 */}
                <Layout.Card style={styles.statsCard} backgroundColor={colors.surface}>
                    <View style={styles.statItem}>
                        <UI.Text variant="h4" weight="bold" color="onSurface">42</UI.Text>
                        <UI.Text variant="caption" color="onSurface" style={{ marginTop: 5 }}>关注</UI.Text>
                    </View>
                    <View style={styles.statDivider} />
                    <View style={styles.statItem}>
                        <UI.Text variant="h4" weight="bold" color="onSurface">128</UI.Text>
                        <UI.Text variant="caption" color="onSurface" style={{ marginTop: 5 }}>粉丝</UI.Text>
                    </View>
                    <View style={styles.statDivider} />
                    <View style={styles.statItem}>
                        <UI.Text variant="h4" weight="bold" color="onSurface">256</UI.Text>
                        <UI.Text variant="caption" color="onSurface" style={{ marginTop: 5 }}>积分</UI.Text>
                    </View>
                </Layout.Card>

                {/* 菜单列表 */}
                <Layout.Card style={styles.menuContainer} backgroundColor={colors.surface}>
                    {menuItems.map(item => (
                        <TouchableOpacity
                            key={item.id}
                            style={styles.menuItem}
                            onPress={item.action}
                        >
                            <View style={styles.menuItemLeft}>
                                <UI.Icon
                                    name={item.icon}
                                    size={20}
                                    style={styles.menuIcon}
                                    color={colors.onSurface}
                                />
                                <UI.Text variant="body1" color="onSurface">{item.title}</UI.Text>
                            </View>
                            <UI.Icon
                                name="chevron-forward"
                                size={16}
                                color={colors.primary}
                            />
                        </TouchableOpacity>
                    ))}
                </Layout.Card>

                {/* 快捷操作 */}
                <View style={styles.actionsContainer}>
                    <UI.Button
                        title="返回首页"
                        variant="filled"
                        style={styles.actionButton}
                        onPress={() => Navigation.navigate(SCREEN_NAMES.HOME_TAB)}
                    />
                    <UI.Button
                        title="退出登录"
                        variant="outlined"
                        onPress={() => Alert.alert('退出登录')}
                    />
                </View>
            </ScrollView>
        </Layout.Container>
    );
};

export default ProfileTabScreen;